<template>
    <div id="GoodsList">
      <el-row>
  <el-col :span="6">  <el-input placeholder="请输入商品名称或关键词" class="searchGoods"   @keydown.enter.native="generalsearch" v-model="searchgoodsname" >
    <el-button slot="append" icon="el-icon-search" class="goodsBtn" @click="generalsearch"></el-button>
  </el-input></el-col> <el-col :span="18" class="Btns"><router-link to="/HeadTop/GoodsSituation/AddGoods"><el-button class="addBtn" @click="AddialogVisible='true'">添加</el-button></router-link></el-col>
</el-row>
<el-table :data="goodslist"
      style="width: 100%">
      <el-table-column prop="index"   label="序号"  width="50px" fixed></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" width="220px" fixed></el-table-column>
      <el-table-column prop="goodsSurfaceimg" label="图片"  width="100px">
        <template  slot-scope="scope">
          <img :src="scope.row.goodsSurfaceimg?scope.row.goodsSurfaceimg:'https://cp1.douguo.com/upload/tuan/8/5/4/448_85e3949ba546d410bafe27be52ed5b44.jpg'" alt=""  class="goodsSurface"  @click="enlarge($event)">
          </template>
      </el-table-column>
      <el-table-column prop="goodsDecription"  label="描述"  width="220px"></el-table-column>
      <el-table-column prop="goodsClassify"  label="分类"  width="90px"></el-table-column>
      <el-table-column prop="goodsPrice" label="价格" width="90px"></el-table-column>
     <el-table-column  label="状态" width="60px" >
       <template slot-scope="scope">{{scope.row.state?'下架':'上架'}}</template>
     </el-table-column>
      <el-table-column prop="goodsSales" label="月销量" width="90px"></el-table-column>
    <el-table-column prop="goodsStore"  label="库存" width="90px"></el-table-column>
      <el-table-column prop="goodsLimit"  label="限购" width="90px"></el-table-column>
      <el-table-column  label="操作"  fixed='right'>
        <template slot-scope="scope"><button class="operate" :id="scope.row.goodsId" @click="modifyinformation($event)">修改</button></template>
</el-table-column>
      </el-table>
<!-- 修改商品信息对话框，:visible.sync="AddialogVisible"表示对话框的显示与隐藏，一般对话框占屏幕得50% -->
<el-dialog
  title="修改商品信息"
  :visible.sync="AddialogVisible"
  width="50%">
  <!-- 对话框内容主体区 -->
  <span>
    <el-form  label-width="80px" :model="onegoodsForm"  ref="onegoodsForm" :rules="changegoodsRules">
  <el-form-item label="商品名称"  prop="goodsName"><el-input  class="activity-name" v-model="onegoodsForm.goodsName"></el-input></el-form-item>
  <el-form-item label="图片"  prop="goodsSurfaceimg">
     <el-image
      style="width: 100px; height: 100px"
      :src="onegoodsForm.goodsSurfaceimg"
        ></el-image>
        <div class="uppicture">
          <img  alt="" class="dispalyimg" ><input type="file"  class="upinput"  ref="file" @change="showimg"><i class="el-icon-plus" id="changes" @click="changeimg"></i></div>
</el-form-item>
  <el-form-item label="描述" prop="goodsSurfaceimg" ><el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="onegoodsForm.goodsDecription"  class="describe">
</el-input></el-form-item>
  <el-form-item label="分类" prop="goodssort"><template>
  <el-radio-group v-model="onegoodsForm.goodsClassify">
    <el-radio label="锅具">锅具</el-radio>
    <el-radio label="餐具">餐具</el-radio>
    <el-radio label="烘焙">烘焙</el-radio>
    <el-radio label="调料">调料</el-radio>
</el-radio-group>
</template>
</el-form-item>
  <el-form-item label="价格"  prop="goodsPrice"><el-input class="price" v-model="onegoodsForm.goodsPrice"></el-input>元</el-form-item>
  <el-form-item label="状态"  prop="state"><template>
    <el-radio-group v-model="onegoodsForm.state">
    <el-radio :label="0">上架</el-radio>
    <el-radio :label="1">下架</el-radio>
</el-radio-group>
  </template>

  </el-form-item>
  <el-form-item label="月销量" ><el-input class="monthsale" v-model="onegoodsForm.goodsSales"></el-input>件</el-form-item>
  <el-form-item label="库存" ><el-input class="monthsale" v-model="onegoodsForm.goodsStore"></el-input>件</el-form-item>
  <el-form-item label="限购"><el-input class="monthsale" v-model="onegoodsForm.goodsLimit"></el-input>件</el-form-item>
  </el-form></span>
  <!-- 对话框底部区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="AddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="collectlist">确 定</el-button>
  </span>
</el-dialog>
<!-- 查看图片对话框 -->
<el-dialog
  title="商品图片"
  :visible.sync="visiblepic"
  width="50%"
  :before-close="handleClose"><div  class="imgpos"><img :src="bigPicture"  class="bigpic"></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visiblepic = false">取 消</el-button>
    <el-button type="primary" @click="visiblepic = false">确 定</el-button>
  </span>
</el-dialog>

<el-pagination background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
          :current-page="pageStart"
      :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
      layout="  prev, pager, next"
      :total="total">
    </el-pagination>
</div>

</template>
<script>
// import cookie from '../../cookien/index'
export default {
  name: 'GoodsList',
  // 当前页数
  // 当前页数每页显示多少条数据

  data () {
    return {
      bigPicture: '',
      visiblepic: false,
      imgurl: '',
      AddialogVisible: false,
      value: true,
      goodslist: [],
      searchgoodsname: '',
      url: '',
      total: 0,
      pageStart: 1,
      pageSize: 8,
      imgnone: false,
      uploadpic: '',
      textarea2: '',
      goodsid: '',
      onegoodsForm: {
        goodsPrice: '',
        goodsName: '',
        goodsDecription: '',
        goodsSurfaceimg: '',
        goodsStore: '',
        goodsLimit: '',
        goodsClassify: '',
        goodsSales: '',
        state: ''
      },
      changegoodsRules: {
        goodsName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goodsSurfaceimg: [
          { required: true, message: '请上传商品图片', trigger: 'blur' }

        ],
        goodsPrice: [
          { required: true, message: '请输入商品定价，要求精确到小数点后两位', trigger: 'blur' }
          // { type: 'number', message: '定价必须为数字值' }

        ],
        goodsDecription: [
          { required: true, message: '请输入商品简介', trigger: 'blur' }

        ],
        goodssort: [
          { required: true, trigger: 'blur' }

        ],
        state: [
          { required: true, trigger: 'blur' }

        ],
        goodsSales: [
          { required: true, message: '请输入商品月销量', trigger: 'blur' }

        ],
        goodsStore: [
          { required: true, message: '请输入商品库存', trigger: 'blur' }

        ],
        goodsLimit: [
          { required: true, message: '请输入商品限购', trigger: 'blur' }

        ]
      }
    }
  },
  created () {
    this.getgoodslist()
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 渲染商品列表
    getgoodslist () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/selectGoodsByPage',
        params: {
          pageStart: this.pageStart,
          pageSize: this.pageSize
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        // console.log(data)

        if (data.data.code === 501) {
          this.$message(data.data.message)
        } else {
          if (data.data.code === 200) {
            this.goodslist = data.data.object.list
            for (let i = 0; i < this.goodslist.length; i++) {
              // const index = (this.pageSize * this.pageStart - 1) + (i + 1) % this.pageSize
              const index = (this.pageSize * (this.pageStart - 1) + (i + 1))
              this.$set(this.goodslist[i], 'index', index)
              // if (this.goodslist[i].state === 0) {
              //   this.$set(this.goodslist[i], 'state', true)
              // } else {
              //   this.$set(this.goodslist[i], 'state', false)
              // }
            }
            this.total = data.data.object.total
          }
        }
      })
    },

    // 点击图片查看图片(放大)

    enlarge (e) {
      this.visiblepic = true
      this.bigPicture = e.target.src
    },

    // 模糊搜索
    generalsearch () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/visualGoods',
        params: {
          pageStart: 1,
          pageSize: 8,
          Information: this.searchgoodsname
        },
        headers: {
          token: this.$store.state.token
        }

      }).then(data => {
        console.log(1121)
        if (!this.searchgoodsname) {
          this.$message.error('请输入搜索信息！')
        } else if (data.data.message === '请先进行登录！') {
          this.$message.error(data.data.message)
        } else {
          if (data.data.code === 200) {
            this.$message.success('搜索成功！')
            this.goodslist = data.data.object.list
          }
        }
      })
    },
    // 监听一页显示多少条数据
    handleSizeChange (newsize) {
      this.pageSize = newsize
      this.getgoodslist()
    },
    // 监听是第几页
    handleCurrentChange (newpage) {
      this.pageStart = newpage
      this.getgoodslist()
    },
    // 根据id渲染修改页面
    modifyinformation (e) {
      this.AddialogVisible = !this.AddialogVisible
      const goodsid = e.target.getAttribute('id')
      localStorage.setItem('goodsid', goodsid)
      this.goodsid = goodsid
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/selectGoodsById',
        params: {
          goodsId: this.goodsid
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        console.log(data.data.object)
        this.onegoodsForm = data.data.object
      })
    },
    // 预览图片
    showimg () {
      const that = this
      console.log(that.$refs.file.files[0])
      var fr = new FileReader()
      fr.readAsDataURL(that.$refs.file.files[0])
      fr.onload = function () {
        that.onegoodsForm.goodsSurfaceimg = fr.result
      }
    },
    // 更换图片
    changeimg () {
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    },
    // 点击确定按钮实现商品信息修改
    // 当不上传图片时 给对应参数传值null
    collectlist () {
      console.log(this.$refs.file.files[0])
      let file
      if (this.$refs.file.files[0] === undefined) {
        file = null
      } else {
        file = this.$refs.file.files[0]
      }
      console.log(file)
      console.log(this.onegoodsForm.state)

      const goodsid = window.localStorage.getItem('goodsid')
      const param = new FormData()
      param.append('goodsPrice', this.onegoodsForm.goodsPrice)
      param.append('goodsName', this.onegoodsForm.goodsName)
      param.append('goodsDecription', this.onegoodsForm.goodsDecription)
      param.append('goodsSurfaceimg', this.onegoodsForm.goodsSurfaceimg)
      param.append('multipartFile', 'null')
      param.append('goodsId', goodsid)
      param.append('goodsStore', this.onegoodsForm.goodsStore)
      param.append('goodsLimit', this.onegoodsForm.goodsLimit)
      param.append('goodsClassify', this.onegoodsForm.goodsClassify)
      param.append('goodsSales', this.onegoodsForm.goodsSales)
      param.append('state', this.onegoodsForm.state)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: this.$store.state.token
        }
      }
      this.$axios.put('/Menu/Admin/modifyGoods', param, config)
        .then(data => {
          console.log(data)
          this.$message.success(data.data.object)
          this.AddialogVisible = false
          this.getgoodslist()
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.imgpos{
  margin-left: 14%;
}
.bigpic{
  width: 430px;
}
.describe{
  width: 396px;
}
.monthsale{
  width: 138px;
  margin-right: 10px;

}
.price{
  width: 138px;
  margin-right: 10px;
}
.limitbuy{
  width: 238px;
}
.orderprice{
  width: 100px;
  margin-right: 10px;
}
#changes{
  font-size: 66px;
    position: absolute;
    margin-top: -100px;
    margin-left: -82px;
    cursor: pointer;
}
.dispalyimg{
  width: 100%;
  height: 100%;
}
.upinput{
  width: 100%;
  height: 100%;
  opacity: 0;
}
.uppicture{
  width: 100px;
  height: 100px;
  position: absolute;
  margin-top: -116px;
  margin-left: 120px;
  i{
    font-size: 56px;
    margin-left: -20px;
    margin-top: 20px;
    position: absolute;
  }
}
.goodsSurface{
  width: 60px;
  height: 60px;
}
.el-row{
  margin-top: 16px;
  height: 45px;
  .goodsBtn{
    color: #ffa433;
    font-size: 20px;
    width: 38px;
    padding: 10px;
  }
  .Btns{
    display: flex;
    justify-content: right;
    .el-button{
      margin-right: 10px;
      height: 32px;
      line-height: 10px;
    }
    .addBtn{
      background-color: #ffa433;
      color: #fff;
    }
  }
}
.operate{
  background-color: #ffa433;
  line-height: 12px;
    height: 30px;
    padding: 8px;
    color:#fff;
  font-size:12px;
  width: 56px;
  letter-spacing: 1px;
  text-align: center;
  margin-left: 10px;
}
.deso{
   line-height: 12px;
    height: 30px;
    padding: 8px;
    color:#fff;
     font-size:12px;
  width: 56px;
  letter-spacing: 1px;
  text-align: center;

}
.el-pagination{
margin-top: 20px;
text-align: center;
}
</style>
